<!DOCTYPE html>
<html>

<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>首页</title>
    <!--外链方式引入vue-->
    <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div id="main-body">
            <div>
                <img class="weather_icon" :src="weather_icon" />
                <span class="weather-text">{{weather_text}}</span>
            </div>
            <img class="log_pic" :src="log_pic_url" />

            <!--todo:请在此编写html代码，从此处往下开发即可-->

            <div class="end_text">
                <span>距离打卡结束倒计时 {{timestr}}</span>
            </div>
            <div class="icon_guide">
                <div v-for="(item,index) in guide">
                    <img class="icon_img" :src="item.icon">
                    <span>{{item.txt}}</span>
                </div>
            </div>
            <div class="selected_background">
                <div class="title_left">
                </div>
                <div class="title_background">
                    精选背景
                </div>
            </div>

            <div class="background">
                <div v-for="i in 7" class="item">
                    <img :src="bgImgList[i-1]" v-if="(i-1) % 2 == 0" alt="">
                </div>
                <!-- 动态高 -->
                <div class="afferent_img" :style="{height: height1}">
                    <img src="./icon_upload_pic@2x.png" alt="">
                    <span>自己传图</span>
                </div>
                <div v-for="i in 7" class="item">
                    <img :src="bgImgList[i-1]" v-if="(i) % 2 == 0" alt="">
                </div>
                <!-- 动态高 -->
                <div class="more_background" :style="{height: height2}">
                    更多美图
                </div>
            </div>

            <div class="selected_background">
                <div class="title_left">
                </div>
                <div class="title_background">
                    精选阅读
                </div>
            </div>

            <div class="read">
                <div v-for="(item) in readData" class="item">
                    <img :src="item.icon" />
                    <div class="right_text">
                        <span class="title">{{item.title}}</span>
                        <span class="date">{{item.date}}</span>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="tab" v-for="(item,index) in tabbar" @click="switchtabs(index)">
                    <img :src="item.icon" alt="">
                    <span :class="index === checked ? 'checked' : '' ">{{item.txt}}</span>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                weather_icon: "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/icon_weather.png",
                weather_text: "",
                log_pic_url: "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/log_pic.png?1=1",//实际运用中，图片由后端返回

                //精刚导航栏数据
                guide: [
                    { icon: "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/icon_guide1.png", txt: "换图" },
                    { icon: "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/icon_guide2.png", txt: "提醒" },
                    { icon: "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/icon_guide3.png", txt: "积分" },
                    { icon: "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/icon_guide4.png", txt: "成就" },
                ],

                //精选图片数据
                bgImgList: ["https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/bg_img1.png", "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/bg_img2.png", "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/bg_img3.png", "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/bg_img4.png", "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/bg_img5.png", "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/bg_img6.png", "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/bg_img7.png"],

                //精选阅读数据
                readData: [
                    {
                        icon: "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/read_pic1.png",
                        title: "好的界面设计并不始于图片，而是始于对人的理解",
                        date: "2021-06-12"
                    },
                    {
                        icon: "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/read_pic2.png",
                        title: "将已知的事物陌生化，更是一种创造",
                        date: "2021-06-10"
                    },
                    {
                        icon: "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/read_pic3.png",
                        title: "不要在你家里放一件你不知其用，或你认为不美的东西",
                        date: "2021-06-08"
                    },
                ],

                //底部导航栏数据
                tabbar: [
                    { icon: "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/icon_tabbar1.png", txt: "早安" },
                    { icon: "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/icon_tabbar2.png", txt: "排名" },
                    { icon: "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/icon_tabbar3.png", txt: "统计" },
                    { icon: "https://xunmi-fe-test.oss-cn-shanghai.aliyuncs.com/img/icon_tabbar4.png", txt: "我的" },
                ],

                //todo:html中需要的变量，请在此处定义

                checked: 0,
                windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
                height1: '',
                height2: '',
                timestr: '',
            },
            created: function () {
                //获取天气文本
                this.getWeatherText();


            },
            mounted: function () {
                this.windowWidth = document.documentElement.clientWidth,
                    this.height1 = (this.windowWidth - 40) / 2 / 2 + 'px';
                this.height2 = (this.windowWidth - 40) / 2 / 2 - 16 + 'px'; //不同手机分辨率不同，此处瀑布流布局如果要达到两边对齐的目的，需要动态计算两个元素的高度，与屏幕宽度有关,每次切换屏幕请刷新页面，在手机端不会这样。
                this.Countdown(); //当天结束倒计时
            },
            methods: {

                getWeatherText() {
                    this.weather_text = "江干区，小雨，气温24～31℃"
                },

                //todo:如有需要，你可以在这里编写method，实现交互或者对变量赋值

                switchtabs(index) {
                    this.checked = index; //由于没有给出其他颜色的图片，这里仅仅可以切换字体颜色
                },

                Countdown() {
                    var _this = this;
                    window.setInterval(function () {
                        let time = new Date(); //当前时间
                        let nowtime = Date.parse(time) / 1000; //距离1970年的秒数
                        let date = time.toLocaleDateString();
                        let nextday = Date.parse(date) / 1000 + 86400; //24点距离1970的秒数
                        let timesecond = nextday - nowtime;
                        let hour = Math.floor(timesecond / 3600);
                        if (hour < 10) hour = '0' + hour;
                        let minutes = Math.floor(timesecond % 3600 / 60);
                        if (minutes < 10) minutes = '0' + minutes;
                        let sencond = timesecond % 3600 % 60;
                        if (sencond < 10) sencond = '0' + sencond;
                        _this.timestr = hour + ':' + minutes + ':' + sencond;
                    }, 1000);
                }
            }
        });
    </script>
    <style type="text/css" scoped>
        #main-body {
            margin-left: 5px;
            margin-right: 5px;
        }

        /* 天气预报样式 */
        .weather_icon {
            width: 16px;
            height: 16px;
            vertical-align: -2px;
        }

        .weather-text {
            font-size: 14px;
            font-weight: 400;
            color: #4F4F4F;
            line-height: 20px;
        }

        /*打卡海报图样式*/

        .log_pic {
            width: 100%;
        }

        /* todo:在这里往下继续编写css */

        /* body{
        margin: 0;  body有8px的外边距，但是为了贴合设计稿，注释
        } */

        .end_text {
            text-align: center;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
        }

        .icon_guide {
            display: flex;
            justify-content: space-around;
            margin: 26px 0;
            text-align: center;
            color: #4F4F4F;
            font-size: 12px;
        }

        .icon_img {
            display: block;
        }


        .selected_background {
            position: relative;
            display: flex;
            justify-content: left;
        }

        .title_left {
            position: absolute;
            left: -13px;
            top: 2px;
            width: 6px;
            height: 36px;
            background-color: #F3CF56;
        }

        .title_background {
            height: 40px;
            box-sizing: border-box;
            line-height: 40px;
            width: 172px;
            background: linear-gradient(90deg, rgba(243, 207, 86, 0.24) 0%, rgba(255, 255, 255, 0.5) 100%);
            border-radius: 6px;
            font-size: 18px;
            padding-left: 9px;
            color: #4f4f4f;
        }

        .background {
            column-count: 2;
            column-gap: 14px;
            margin-top: 14px;
            margin-bottom: 20px;
            height: 100%;
        }

        .background .item img {
            width: 100%;
            height: 25%;
            display: block;
        }

        .background .item {
            margin-bottom: 16px;
        }

        .afferent_img {
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            background-color: rgba(243, 207, 86, 0.05);
            text-align: center;
            width: 100%;
            border-radius: 6px;
            font-size: 18px;
            border: 1px dashed #F3CF56;
            color: #F3CF56;
        }

        .afferent_img img {
            vertical-align: middle;
        }

        .afferent_img span {
            vertical-align: middle;
        }

        .more_background {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #F3CF56;
            border-radius: 6px;
            text-align: center;
            color: white;
            font-size: 18px;
        }

        .read {
            margin-top: 14px;
            font-size: 0;
            margin-bottom: 100px;
        }

        .read img {
            display: block;
            width: 128px;
        }

        .right_text {
            position: relative;
            padding-left: 12px;
            padding-top: 8px;
            width: 100%;
        }

        .read .right_text .title {
            font-size: 16px;
            color: #4F4F4F;
            font-family: PingFangSC-Regular, PingFang SC;
        }

        .read .right_text .date {
            font-size: 12px;
            color: #4F4F4F;
            position: absolute;
            font-family: PingFangSC-Regular, PingFang SC;
            bottom: 6px;
            right: 1px;
        }

        .read .item {
            display: flex;
            height: 100%;
            margin-bottom: 14px;
        }

        .footer {
            display: flex;
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 60px;
            background-color: white;
            left: 0;
        }

        .footer .tab {
            width: 25%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .footer .tab img {
            width: 26px;
            height: 26px;
        }

        .footer .tab span {
            font-size: 10px;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #BFBFBF;
        }

        .footer .tab span.checked {
            color: #F3CF56;
        }
    </style>
</body>

</html>